<template>
	<view>
		<view style="background: linear-gradient(180deg,#e0f4ff, #f8f9f9);min-height: 100vh;">
			<view class="u-padding-40">
				<u-subsection mode='button' 
				@change='SelectChange'
				active-color='#fff' button-color='#4f8bff' :list="nav" :current="current" bg-color='transparen'>
				</u-subsection>
			</view>
			<view v-for="(item,index) in list" :key='index' 
			style="background: #fff;;width: 700rpx;margin:20rpx auto;border-radius: 20rpx;"
			>
			<view class="u-flex u-padding-20">
				<view class="">
					  <view style="color: #4F8BFF;font-size: 45rpx;font-weight: bold;">{{item.money}}</view>
					  <view style="color: #4F8BFF;font-size: 22rpx;">优惠券（元）</view>
				</view>
				<view class="u-margin-left-20">
					  <view style="font-weight: bold;">门槛金额：{{Number(item.needMoney)==0?'无门槛':'满'+item.needMoney+'可用'}}</view>
					  <view class="u-type-info u-font-22">有效期：{{item.endStr}}</view>
				</view>
			</view>
			<view style="padding: 0 20rpx 20rpx 20rpx;font-size: 26rpx;" class="u-type-info">
			  备注：  {{item.remark?item.remark:'暂无'}}
			</view>
				
				
			</view>
			
		</view>
		
		
		
	</view>
</template>
<script>
	import loader from '@/common/loadPage.js';
	

	export default {
		mixins: [loader],
		data() {
			return {
				nav: [{
						name: '未使用',
						status:2
					},
					{
						name: '已使用',
						status:1
					},
					{
						name: '已过期',
						status:0
					}
				],
				list: [],
				initial: {
					geturl: "/user/coupon",
					parm: {
						status:2
						// 状态：2未使用，1已使用，0已过期
					},
					isPage: true
				},
				current: 0,
			}
		},
		onLoad() {
			this.getGoods();
		},
		methods:{
			SelectChange(e){
				
				this.initial.parm.status=this.nav[e].status;
				this.getGoods()
			}
		}
	}
</script>

<style>
</style>
